<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name: '人工'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="0">
            <div class="analyItem">
                <p class="analyItemTit tx-center">额度</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">计划额度</span>
                        <span> {{proPaymentInfo !== null && proPaymentInfo.SumArtificialMoney !== null ? proPaymentInfo.SumArtificialMoney : 0}}元</span>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">已用</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">已付</span>
                        <span>{{proPaymentInfo !== null && proPaymentInfo.SUMRenGong !== null ? proPaymentInfo.SUMRenGong : 0 }}元</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">待付</span>
                        <span>{{proPaymentInfo !== null && proPaymentInfo.SumArtificialMoney !== null ? proPaymentInfo.SumArtificialMoney: (0-(proPaymentInfo !== null && proPaymentInfo.SUMRenGong !== null ? proPaymentInfo.SUMRenGong : 0 ))}}元</span>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">剩余</p>
                <div class="analyItemCon"><p>{{proPaymentInfo !== null && proPaymentInfo.SumArtificialMoney !== null ? proPaymentInfo.SumArtificialMoney : 0}}元</p></div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">可用</p>
                <div class="analyItemCon"><p>{{proPaymentInfo !== null && proPaymentInfo.RenGongMoney !== null ?proPaymentInfo.RenGongMoney:0}}元</p></div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">可用额度</span>
                        <span> {{proPaymentInfo !== null && proPaymentInfo.RenGongMoney !== null ? proPaymentInfo.RenGongMoney : 0 }}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">计划额度</span>
                        <span>{{proPaymentInfo !== null &&  proPaymentInfo.SumArtificialMoney !== null ? proPaymentInfo.SumArtificialMoney : 0 }}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {

    data () {
        return {
            proPaymentInfo: null // 材料 人工款数据
        }
    },
    mounted () {
        this.proPaymentInfo = this.$route.query.proPaymentInfo
    },
    created () {
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {

    }
}
</script>

